<template>
	<view class="content">
		<view class="avatar">
			<image style="width: 117px;height: 117px;" :src="authorInfo.avatar" mode="aspectFill"></image>
		</view>
		<view class="english-name">
			{{authorInfo.englishName}}
		</view>
		<view class="chinese-name">
			{{authorInfo.chineseName}}
		</view>
		<view class="text">
			{{authorInfo.introduction}}
		</view>
		<view class="more">
			更多资料
		</view>
		<view class="photo">
			<view v-for="i in 5" class="image-box">
				<image src="../../static/photo.jpeg" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '../../API/index.js'
	export default {
		data() {
			return {
				authorInfo:{}
			}
		},
		onLoad(option) {
			this.getAuthorInfo(option.id)
		},
		methods: {
			getAuthorInfo(id) {
				let data = {
					"form": "author",
					"operation": "search",
					"data": {
						"id": parseInt(id)
					},
					"size": -1
				}
				return new Promise((resolve) => {
					API.operationForm(data).then(res => {
						console.log(res)
						this.authorInfo = res.data.data.list[0]
						resolve()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.avatar {
		width: 116px;
		height: 116px;
		border-radius: 58px;
		overflow: hidden;
		box-shadow: 2px 7px 11px rgba(0, 0, 0, .23);
		margin-top: 30px;

		image {
			width: 100%;
		}
	}

	.english-name {
		font-size: 24px;
		margin: 20px 0 5px 0;
	}

	.chinese-name {
		font-size: 24px;
		margin: 10px 0 20px 0;
	}

	.content {
		line-height: 26px;
		color: rgba(0, 0, 0, .6);
	}

	.text {
		width: 90%;
	}

	.more {
		width: 90%;
		text-align: end;
		color: #2B3EFF;
	}

	.photo {
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
		align-content: flex-start;
		margin-top: 20px;
	}

	.image-box {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
		overflow: hidden;
		margin: 5px;

		image {
			width: 100%;
		}
	}
</style>
